<template>
  <div class="fullScreen" :key="$route.fullPath">
    <dv-loading style="
          color: #fff;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        " v-if="loading">加载中，请稍后......</dv-loading>
    <div class="content" v-else>
      <!-- 顶部 -->
      <div class="top">
        <dv-decoration-8 class="left_line" style="width: 25%; height: 5rem" />
        <dv-decoration-10 style="width: 25%; height: 5px" />
        <dv-decoration-6 style="width: 40%; height: 10px; margin-top: 6rem" />
        <dv-decoration-10 style="width: 25%; height: 5px; transform: rotateY(180deg)" />
        <dv-decoration-8 class="right_line" :reverse="true" style="width: 25%; height: 5rem" />
        <div class="title">智慧能源管理平台</div>
        <div class="weather">
          <span>
            <i @click="back" class="el-icon-s-home" style="
                  font-size: 2rem;
                  margin-right: 1rem;
                  cursor: pointer;
                  color: aqua;
                  vertical-align: bottom;
                "></i>
            {{ dataWeather.city }}
            {{ dataWeather.weathertemp }}
            <div class="svg">
              <img v-for="(item, index) in src" :key="index" style="
                    transform: translateX(2rem);
                    filter: drop-shadow(aqua -2rem 0px 0px);
                  " :src="require('@/assets/weatherIcons/' + item.id + '.svg')" alt="" />
            </div>
            {{ dataWeather.peraturetemp }}
          </span>
        </div>
        <div class="datatime">
          <span>
            <img style="margin-right: 1rem; vertical-align: top" src="../../assets/image/clock.svg" alt="" />{{
              dataTime.dateYear }} {{ dataTime.dateWeek }}
            {{ dataTime.dateDay }}
          </span>
        </div>
      </div>
      <!-- 内容 -->
      <div class="bottom">
        <div class="left">
          <div class="left_one">
            <div class="left_one_item">
              <div class="left_one_item_title">总流水</div>
              <div class="left_one_item_count">
                <num :number="parseInt(income)"></num>
              </div>
            </div>
            <div class="left_one_item">
              <div class="left_one_item_title">年充值流水</div>
              <div class="left_one_item_count">
                <num :number="parseInt(yearincome)"></num>
              </div>
            </div>
            <div class="left_one_item">
              <div class="left_one_item_title">月充值流水</div>
              <div class="left_one_item_count">
                <num :number="parseInt(monthincome)"></num>
              </div>
            </div>
          </div>
          <div class="left_two">
            <div class="left_two_title">充值情况展示</div>
            <incomeTable :data="incomeData" :header="['时间', '设备表号', '金额', '类型']"></incomeTable>
          </div>
        </div>
        <div class="middle">
          <div class="middle_one">
            <china></china>
          </div>
          <div class="middle_two">
            <div class="middle_two_item" style="color: #4292FF;">
              <div class="middle_two_item_top">
                <img src="../../assets/dataView/middleText1.png" alt="">
                <div class="middle_num">{{ Number(Number(online).toFixed(4) * 100).toFixed(2) }}%</div>
              </div>
              <div class="middle_two_item_bottom">
                设备在线率
              </div>
            </div>
            <div class="middle_two_item" style="color: #11E0FF;">
              <div class="middle_two_item_top">
                <img src="../../assets/dataView/middleText3.png" alt="">
                <div class="middle_num">{{ Number(income / 10000).toFixed(2) }}W</div>
              </div>
              <div class="middle_two_item_bottom">
                总流水
              </div>
            </div>
            <div class="middle_two_item" style="color: #96E781;">
              <div class="middle_two_item_top">
                <img src="../../assets/dataView/middleText2.png" alt="">
                <div class="middle_num">{{ Number(Number(bindNum / total).toFixed(4) * 100).toFixed(2) }}%</div>
              </div>
              <div class="middle_two_item_bottom">
                设备绑定率
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="right_one">
            <div class="right_one_title">设备基本情况</div>
            <pieThree :count="countData"></pieThree>
          </div>
          <div class="right_two">
            <div class="right_two_title">风控设备提醒</div>
            <incomeTable :data="foxData" :header="['时间', '设备表号', '类型', '风控码']"></incomeTable>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import {
  getCountApi,
  getDeviceApi,
  getIncomeApi,
  getRank1Api,
} from "../../api/system/dashboard";
import {
  getSafeApi
} from "../../api/system/safe";
import { getRecordApi } from '../../api/system/meter'
import { formatTime1 } from "../../utils/index";
import { weatherOption } from "../../config/weatherOption/index";
import "echarts-liquidfill";
import china from './components/china.vue'
import pieThree from './components/pieThree.vue'
import num from './components/num.vue'
import incomeTable from './components/incomeTable.vue'
export default {
  name: "fullScreen",
  components: {
    china,
    pieThree,
    num,
    incomeTable
  },
  data() {
    return {
      foxData: [],
      incomeData: [],
      online: 0,
      onlineNum: "",
      allCount: [],
      xAxis: [],
      crash: [],
      zubi: [],
      weixin: [],
      aliPay: [],
      timeData: {
        date: "",
        dateOperation: "month",
      },
      tenantNum: "",
      tenantNum2: "",
      landlord: "",
      income: "",
      yearincome: "",
      monthincome: "",
      total: "",
      bindNum: "",
      countData: [],
      src: [{ id: 100 }],
      key: 1,
      loading: true,
      currentName: "中国地图",
      dataWeather: {
        city: "北京市",
        dayweather: "晴",
        nightweather: "多云",
        weathertemp: "晴", // 根据时间判断选白天还是晚上的天气
        nighttemp: "3℃",
        daytemp: "15℃",
        peraturetemp: "3℃~15℃", // 根据时间判断选白天还是晚上的温度
      },
      fromPath: "",
      timeSet: null, // 定时器
      dataTime: {
        dateDay: null,
        dateYear: null,
        dateWeek: null,
        weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      },
      rankTitle: [],
      rankValue: [],
      operation: "month",
      subject: "product",
      dingshi: null
    };
  },

  beforeRouteEnter(to, from, next) {
    next((vm) => {
      //  这里的vm指的就是vue实例，可以用来当做this使用
      vm.fromPath = from.path; //获取上一级路由的路径
    });
  },
  mounted() {
    let that = this;
    this.getTime();
    this.getWeather();
    this.getDateTime();
    this.getCount();
    this.getDevice();
    this.getRecord()
    this.getSafe()
    this.dingshi = setInterval(() => {
      this.getCount();
      this.getDevice();
      this.getRecord()
      this.getSafe()
    }, 300000);
    setTimeout(() => {
      this.loading = false;
    }, 1000);
    window.addEventListener("fullscreenchange", function () {
      if (!that.checkFull()) {
        that.$router.push(that.fromPath);
      }
    });
  },
  destroyed() {
    window.removeEventListener("fullscreenchange", function () {
      if (!that.checkFull()) {
        that.$router.push(that.fromPath);
      } else {
      }
    });
    clearInterval(this.timeSet);
    clearInterval(this.dingshi)
  },
  methods: {
    getSafe() {
      getSafeApi(1, 100, '').then((res) => {
        if (res.code == 200) {
          if (res.data.rows.length == 0) {
            this.foxData = []
          } else {
            this.foxData = []
            res.data.rows.forEach(item => {
              let it = []
              it.push(item.createTime)
              it.push(item.meterNumber)
              if (item.payType == 1) {
                it.push('<span style="color:#17F52E;border:1px solid #17F52E;padding:3px;border-radius:5px">微信</span>')
              } else {
                it.push('<span style="color:#00FFFF;border:1px solid #00FFFF;padding:3px;border-radius:5px">支付宝</span>')
              }
              it.push(`<span style="color:#FA0527;border:1px solid #FA0527;padding:3px;border-radius:5px">${item.code}</span>`)
              this.foxData.push(it)
            })
          }
        }
      });
    },
    getRecord() {
      getRecordApi(1, 100, this.timeData.date, this.timeData.date, '', '', '', '', '', '', '', '').then((res) => {
        if (res.code == 200) {
          if (res.data.rows.length == 0) {
            this.incomeData = []
          } else {
            this.incomeData = []
            res.data.rows.forEach(item => {
              let it = []
              it.push(item.rechargeTime)
              it.push(item.meterNumber)
              it.push(item.rechargeFullAmount)
              if (item.rechargeWay == 1) {
                it.push('<span style="color:#FA0527;border:1px solid #FA0527;padding:3px;border-radius:5px">现金</span>')
              } else if ((item.rechargeWay == 2)) {
                it.push('<span style="color:#FA9805;border:1px solid #FA9805;padding:3px;border-radius:5px">租币</span>')
              } else if (item.rechargeWay == 3) {
                it.push('<span style="color:#17F52E;border:1px solid #17F52E;padding:3px;border-radius:5px">微信</span>')
              } else {
                it.push('<span style="color:#00FFFF;border:1px solid #00FFFF;padding:3px;border-radius:5px">支付宝</span>')
              }
              this.incomeData.push(it)
            })
          }
        }
      });
    },
    dateChange2() {
      this.getRank(this.operation, this.subject);
    },
    // 获取排名
    getRank(operation, subject) {
      getRank1Api(operation, subject).then((res) => {
        if (res.code == 200) {
          if (res.data.length !== 0) {
            this.rankTitle = [];
            this.rankValue = [];
            res.data.reverse().forEach((item) => {
              this.rankTitle.push(item.name);
              this.rankValue.push(item.count);
            });
            this.initPie2();
          }
        }
      });
    },
    getTime() {
      // 获取当前日期
      let year = new Date().getFullYear();
      let month = new Date().getMonth() + 1;
      let day = new Date().getDate();
      if (month < 10) {
        month = "0" + String(Number(month));
      }
      if (day < 10) {
        day = "0" + String(Number(day));
      }
      this.timeData.date = year + "-" + month + "-" + day;
      this.getIncome(this.timeData.date, this.timeData.dateOperation);
    },
    // 设备数量图表
    initPanel() {
      let myChart = this.$echarts.init(this.$refs.panel);
      let colorSet = {
        color1: {
          bg: "rgba(0,194,255,.2)",
          bar: this.$echarts.graphic.LinearGradient(0, 1, 1, 0, [
            {
              offset: 0,
              color: "#00FFFF",
            },
            {
              offset: 0.4,
              color: "rgba(0,255,255,.7)",
            },
            {
              offset: 0.8,
              color: "rgba(0,255,255,.3)",
            },
          ]),
          pin: "#22E4D2",
          circle1: "#00D2FF",
          circle2: this.$echarts.graphic.LinearGradient(1, 1, 0, 0, [
            {
              offset: 0,
              color: "#1EC5EC",
            },
            {
              offset: 0.5,
              color: "#3DC8DA",
            },
            {
              offset: 0.8,
              color: "#52CACD",
            },
          ]),
        },
      };
      let baseColor = colorSet.color1;
      let option = {
        graphic: {
          type: "text",
          left: "center",
          top: "55%",
          z: 100,
          style: {
            fill: "#fff",
            text: "绑定设备数",
            font: "bolder 16px Microsoft YaHei",
          },
        },
        tooltip: {
          show: true,
        },
        title: {
          text: this.bindNum,
          left: "center",
          top: "40%",
          triggerEvent: true,
          textStyle: {
            fontSize: 30,
            fontFamily: "Microsoft YaHei",
            color: "#fff",
          },
        },
        angleAxis: {
          show: false,
          max: (Number(this.total) * 360) / 265, //总数
          type: "value",
          startAngle: 223,
          splitLine: {
            show: false,
          },
        },
        barMaxWidth: 20,
        radiusAxis: {
          show: false,
          type: "category",
          z: 10,
        },
        polar: {
          //圆环大小
          radius: "157%",
        },
        series: [
          // 进度条
          {
            type: "bar",
            data: [
              {
                value: Number(this.bindNum), //绑定数
                itemStyle: {
                  color: baseColor.bar,
                },
              },
            ],
            barGap: "-50%",
            coordinateSystem: "polar", //环形柱状图
            roundCap: true,
            z: 2,
            animationDuration: 1500,
          },
          // 进度条外框 仪表盘
          {
            name: "外部进度条",
            type: "gauge",
            center: ["50%", "50%"],
            radius: "90%",
            startAngle: 226,
            splitNumber: 10,
            axisLine: {
              lineStyle: {
                color: [[1, baseColor.bg]],
                width: 40,
              },
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            itemStyle: {
              show: false,
            },
            pointer: {
              show: false,
            },
          },
          // 刻度
          {
            name: "内部部刻度",
            type: "gauge",
            radius: "60%",
            min: 0,
            max: 100,
            splitNumber: 10,
            startAngle: 225,
            endAngle: -45,
            axisLine: {
              show: false,
              lineStyle: {
                width: 4,
                color: [[1, "rgba(0,0,0,0)"]],
              },
            },
            axisTick: {
              show: true,
              splitNumber: 10,
              lineStyle: {
                color: baseColor.pin,
                width: 2,
              },
              length: -20,
            },
            axisLabel: {
              show: false,
            },
            splitLine: {
              show: true,
              length: -30,
              lineStyle: {
                width: 6,
                color: baseColor.pin,
              },
            },
            detail: {
              show: false,
            },
            pointer: {
              show: false,
            },
          },
          // 圆环
          {
            name: "数量",
            type: "pie",
            animation: false,
            hoverAnimation: false,
            clockwise: false,
            radius: ["50%", "50%"],
            center: ["50%", "50%"],
            data: [10],
            itemStyle: {
              normal: {
                borderWidth: 6,
                borderType: "solid",
                borderColor: baseColor.circle1,
                opacity: 0.5,
              },
            },
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
                textStyle: {
                  fontSize: "14",
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
          },
          // 内部圆
          {
            name: "设备总数",
            type: "pie",
            animation: false,
            hoverAnimation: false,
            clockwise: false,
            radius: "40%",
            center: ["50%", "50%"],
            data: [this.total],
            itemStyle: {
              normal: {
                color: baseColor.circle2,
              },
            },
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
                textStyle: {
                  fontSize: "14",
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    // 获取时间
    getDateTime() {
      this.timeSet = setInterval(() => {
        this.dataTime.dateYear = formatTime1(new Date(), "yyyy-MM-dd");
        this.dataTime.dateWeek = this.dataTime.weekday[new Date().getDay()];
        this.dataTime.dateDay = formatTime1(new Date(), "HH: mm: ss");
      }, 1000);
    },
    // 返回
    back() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
      this.$router.push(this.fromPath);
    },
    // 判断全屏
    checkFull() {
      //判断浏览器是否处于全屏状态 （需要考虑兼容问题）
      //火狐浏览器
      var isFull =
        document.mozFullScreen ||
        document.fullScreen ||
        //谷歌浏览器及Webkit内核浏览器
        document.webkitIsFullScreen ||
        document.webkitRequestFullScreen ||
        document.mozRequestFullScreen ||
        document.msFullscreenEnabled;
      if (isFull === undefined) {
        isFull = false;
      }
      return isFull;
    },
    // 获取天气
    getWeather() {
      this.$.get({
        //这里的url不能写到data对象的外面
        url: "https://query.asilu.com/weather/gaode/",
        dataType: "jsonp", // 请求方式为jsonp
        success: (data) => {
          if (data.status === "1") {
            let currTime = new Date().getHours();
            let dailyForecast = data.forecasts[0].casts[0];
            let city = data.forecasts[0].city;
            let daytemp = dailyForecast.daytemp + "℃";
            let nighttemp = dailyForecast.nighttemp + "℃";
            let weathertemp = "";
            let peraturetemp = "";
            if (currTime >= 6 && currTime < 18) {
              weathertemp = dailyForecast.dayweather;
              peraturetemp =
                dailyForecast.nighttemp + "℃~" + dailyForecast.daytemp + "℃";
            } else {
              weathertemp = dailyForecast.nightweather;
              peraturetemp =
                dailyForecast.nighttemp + "℃~" + dailyForecast.daytemp + "℃";
            }
            let message = { id: weatherOption.weatherCode[weathertemp] };
            this.$set(this.src, 0, message);
            this.dataWeather = {
              city,
              daytemp,
              nighttemp,
              weathertemp,
              peraturetemp,
            };
          }
        },
      });
    },
    // 获取总数
    getCount() {
      getCountApi().then((res) => {
        if (res.code == 200) {
          if (res.data.length !== 0) {
            this.countData = res.data;
            this.tenantNum = res.data[0].count;
            this.tenantNum2 = res.data[1].count;
            this.landlord = res.data[2].count;
            this.total = res.data[3].count;
            this.bindNum = res.data[4].count;
            this.income = res.data[6].count;
            this.yearincome = res.data[7].count;
            this.monthincome = res.data[8].count;
          }
        }
      });
    },
    // 获取收入
    getIncome(date, dateOperation) {
      getIncomeApi(date, dateOperation).then((res) => {
        if (res.code == 200) {
          if (res.data.length !== 0) {
            this.xAxis = res.data[0].keys;
            this.crash = res.data[0].values;
            this.zubi = res.data[1].values;
            this.weixin = res.data[2].values;
            this.aliPay = res.data[3].values;
            this.allCount = [];
            for (let index = 0; index < this.xAxis.length; index++) {
              this.allCount.push(
                (
                  Number(this.crash[index]) +
                  Number(this.zubi[index]) +
                  Number(this.weixin[index]) +
                  Number(this.aliPay[index])
                ).toFixed(2)
              );
            }
            // this.initBar();
          }
        }
      });
    },
    // 切换年月
    dateChange() {
      if (this.timeData.date.split("-")[1] < 10) {
        this.timeData.date =
          this.timeData.date.split("-")[0] +
          "-" +
          "0" +
          String(Number(this.timeData.date.split("-")[1])) +
          "-" +
          this.timeData.date.split("-")[2];
      }
      if (this.timeData.date.split("-")[2] < 10) {
        this.timeData.date =
          this.timeData.date.split("-")[0] +
          "-" +
          this.timeData.date.split("-")[1] +
          "-" +
          "0" +
          String(Number(this.timeData.date.split("-")[2]));
      }
      this.getIncome(this.timeData.date, this.timeData.dateOperation);
    },
    // 获取设备统计
    getDevice() {
      let that = this;
      getDeviceApi().then((res) => {
        if (res.code == 200) {
          this.typeList = [];
          res.data.forEach((item) => {
            this.typeList.push({
              value: item.count,
              name: item.name,
            });
            if (item.name == "4G") {
              let num = 0;
              item.detail.forEach((it) => {
                if (it.name == "在线") {
                  that.onlineNum = it.count;
                }
                num = Number(num) + Number(it.count);
              });
              that.online = Number(that.onlineNum / Number(num));
            }
          });
        }
      });
    },
    // 收入
    initBar() {
      let myChart = this.$echarts.init(this.$refs.bar, "dark");
      let option = {
        backgroundColor: "transparent",
        animation: true,
        animationDuration: 2000,
        title: {
          text: "流水详情",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        // color: ["#223174", "#452564", "#003A63", "#504529"],
        color: ["#3973D0", "#1DB6E2", "#E4D445", "#A9DA84"],
        // color: ["rgba(158,84,208,.6)", "rgba(80,109,242,.6)", "rgba(218,187,75,.6)", "#FAB16C"],
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        legend: {
          left: "10%",
          top: "0%",
          data: ["微信", "现金", "支付宝", "租币", "总流水"],
          selected: {
            总流水: false,
          },
        },
        xAxis: {
          type: "category",
          data: this.xAxis,
        },
        yAxis: [
          {
            type: "value",
          },
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "微信",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: this.weixin,
          },
          // -----------------------------------------------------------------------------------------------------------

          {
            name: "现金",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: this.crash,
          },

          {
            name: "支付宝",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: this.aliPay,
          },
          {
            name: "租币",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: this.zubi,
          },
          {
            type: "line",
            name: "总流水",
            smooth: 0.6,
            label: {
              normal: {
                show: true, //显示数值
                position: "top", //  位置设为top
                formatter: "{c}",
                textStyle: { color: "#00FFFF" }, //设置数值颜色
              },
            },
            itemStyle: {
              normal: {
                color: "#00FFFF", // 设置背景颜色为透明
              },
            },
            data: this.allCount,
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    // 水球，，电表在线数
    initWater() {
      let myChart = this.$echarts.init(this.$refs.water);
      let option = {
        title: {
          text: "在线率",
          textStyle: {
            color: "#fff",
          },
          left: "center",
          bottom: "30%",
        },
        backgroundColor: "transparent", //背景色
        series: [
          {
            type: "liquidFill", //水位图
            radius: "80%", //显示比例
            center: ["50%", "50%"], //中心点
            amplitude: 25, //水波振幅
            data: [this.online, this.online, this.online], // data个数代表波浪数
            color: ["#00FFFF"], //波浪颜色
            backgroundStyle: {
              borderWidth: 8, //外边框
              borderColor: "#00FFFF", //边框颜色
              color: "transparent", //边框内部填充部分颜色
            },
            label: {
              //标签设置
              normal: {
                position: ["50%", "50%"],
                formatter: this.online, //显示文本,
                textStyle: {
                  fontSize: "2rem", //文本字号,
                  color: "#fff",
                },
              },
            },
            outline: {
              show: false, //最外层边框显示控制
            },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    // 4g 蓝牙分类
    initFour() {
      let myChart = this.$echarts.init(this.$refs.four);
      let option = {
        title: {
          text: "设备统计",
          textStyle: {
            color: "#fff",
          },
          left: "center",
          top: "center",
        },
        color: ["#2FF2E8", "#3973D0"],
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          right: "0%",
          top: "10%",
          textStyle: {
            color: "#fff",
            fontSize: 16,
            padding: [0, 0, 0, 10],
          },
        },
        series: {
          type: "pie",
          radius: ["50%", "80%"],
          center: ["50%", "50%"],
          emphasis: {
            scale: true,
          },
          label: {
            show: false,
            position: "center",
          },
          data: this.typeList,
        },
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    // 排名
    initPie2() {
      let myChart = this.$echarts.init(this.$refs.pie2, "dark");
      let option = {
        title: {
          text: "新增排行榜",
          textStyle: {
            color: "#fff",
          },
        },
        backgroundColor: "transparent",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          show: false,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
          show: false,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
        },
        yAxis: {
          type: "category",
          data: this.rankTitle,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            animationDuration: 2000,
            animationEasing: "cubicInOut",
            label: {
              show: true,
              position: "right",
            },
            type: "bar",
            barMaxWidth: 40,
            data: this.rankValue,
            itemStyle: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: "#02948D" },
                { offset: 0.5, color: "#02BDB1" },
                { offset: 1, color: "#00FDE7" },
              ]),
            },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style  lang="scss" scoped>
.fullScreen {
  overflow: auto;
  width: 100%;
  height: 100vh;
  background: url(../../assets/dataView/background.png) no-repeat;
  background-size: 100% 100%;
  // padding: 1% 0;

  .content {
    width: 100%;
    height: 100%;

    .top {
      width: 100%;
      height: 10%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;

      .title {
        position: absolute;
        left: 50%;
        bottom: 50%;
        color: #fff;
        font-weight: bold;
        font-size: 1.8rem;
        transform: translate(-50%, 50%);
      }

      .weather {
        position: absolute;
        left: 4.1rem;
        top: 0.4rem;
        color: #fff;
        font-size: 1.2rem;

        span {
          display: flex;
          align-items: center;

          .svg {
            width: 2rem;
            height: 2rem;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 8px;

            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }

      .datatime {
        font-size: 1.2rem;
        position: absolute;
        right: 4.1rem;
        top: 0.7rem;
        color: #fff;
      }
    }

    .bottom {
      width: 100%;
      height: 90%;
      display: flex;

      .left {
        width: 25%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .left_one {
          width: 100%;
          height: 48%;
          background: url('../../assets/dataView/left1.png') no-repeat;
          background-size: 100% 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;

          .left_one_item {
            width: 100%;
            height: 30%;
            display: flex;
            flex-direction: column;
            padding-left: 4%;
            justify-content: center;

            .left_one_item_title {
              color: #fff;
              margin-bottom: 1rem;
            }

            .left_one_item_count {
              // height: 100%;
              width: 100%;
            }
          }
        }

        .left_two {
          position: relative;
          width: 100%;
          height: 48%;
          background: url('../../assets/dataView/left2.png') no-repeat;
          background-size: 100% 100%;

          .left_two_title {
            color: #7DA6D9;
            position: absolute;
            left: 5%;
            top: 3%;
          }
        }
      }

      .right {
        width: 25%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .right_one {
          position: relative;
          width: 100%;
          height: 30%;
          background: url('../../assets/dataView/right1.png') no-repeat;
          background-size: 100% 100%;

          .right_one_title {
            color: #7DA6D9;
            position: absolute;
            left: 5%;
            top: 3%;
          }

        }

        .right_two {
          position: relative;
          width: 100%;
          height: 70%;
          background: url('../../assets/dataView/right2.png') no-repeat;
          background-size: 100% 100%;

          .right_two_title {
            color: #7DA6D9;
            position: absolute;
            left: 5%;
            top: 3%;
          }
        }
      }

      .middle {
        width: 50%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;

        .middle_one {
          width: 100%;
          height: 80%;
        }

        .middle_two {
          width: 90%;
          height: 20%;
          background: url('../../assets/dataView/middle.png') no-repeat;
          background-size: 100% 100%;
          display: flex;
          justify-content: space-around;
          align-items: center;

          .middle_two_item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 30%;
            height: 100%;
            font-size: 1.5rem;
            font-weight: bold;

            .middle_two_item_top {
              display: flex;
              align-items: center;
              margin-bottom: 1rem;
              font-size: 2rem;

              img {
                margin-right: 0.8rem;
                width: 2.5rem;
                height: 2.5rem;
              }
            }
          }
        }
      }
    }
  }
}
</style>